<template>
  <div>
    登录组件
    <button @click="home">跳到home</button>
    <son :son="son" :grandson="grandson" @son="sons" @grandson="grandsons" >
      <div slot="son" slot-scope="scope">
        <ul>
          <li v-for="(v, i) in scope.data" :key="i">
            <div>name:{{ v.name }}</div>
            <div>age:{{ v.age }}</div>
          </li>
        </ul>
      </div>
    </son>
    <!-- <div>
      <input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox"> checked </label>
    </div>
    <div>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames" />
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
      <label for="mike">Mike</label>
      <br />
      <span>Checked names: {{ checkedNames }}</span>
    </div> -->
  </div>
</template>
<script>
import son from "../../components/son.vue";
export default {
  name: "father",
  components: {
    son,
  },
  data() {
    return {
      son: "这是父亲给他儿子的222",
      grandson: "这是父亲给他孙子的",
      // checkedNames: [],
    };
  },
  methods: {
    home(){
      this.$router.push({path:"/Home"})
    },
    sons() {
      console.log("这是给儿子的方法");
    },
    grandsons() {
      console.log("这是给孙子的方法");
    },
  },
  mounted() {
    console.log("11111");
    function runAsync1() {
      let p = new Promise((res, err) => {
        setTimeout(() => {
          console.log("22222");
          res("33333");
        }, 2000);
      });
      return p;
    }
    function runAsync2() {
      let p = new Promise((res, err) => {
        setTimeout(() => {
          res("5555555");
          console.log("444444");
        }, 2000);
      });
      return p;
    }
    function runAsync3() {
      let p = new Promise((res, err) => {
        setTimeout(() => {
          console.log("66666");
          res("777777");
        }, 2000);
      });
      return p;
    }
    runAsync1()
      .then(function (data) {
        console.log(data);
        return runAsync2();
      })
      .then(function (data) {
        console.log(data);
        return runAsync3();
      })
      .then(function (data) {
        console.log(data);
      });
    async function asy() {
      return "hello async";
    }
    asy().then((res) => {
      console.log(res);
    });
  },
};
</script>